<template>
  <el-drawer :append-to-body="true" title="抄送人设置" v-model="visible" custom-class="set_copyer" :show-close="false" :size="550" :before-close="saveCopyer">
    <div class="drawer_content">
      <div class="copyer_content">
        <el-radio-group v-model="copyerConfig.assigneeType" class="clear" @change="changeType">
          <el-radio v-for="{ value, label } in copyTypes" :key="value" :label="value">{{ label }}</el-radio>
        </el-radio-group>
        <div>
          <el-button type="primary" @click="addCopyer" v-if="copyerConfig.assigneeType == 'user'">添加/修改成员</el-button>
          <el-button type="primary" @click="addCopyer" v-if="copyerConfig.assigneeType == 'role'">添加/修改角色</el-button>
          <el-button type="primary" @click="addCopyer" v-if="copyerConfig.assigneeType == 'depart'">添加/修改部门</el-button>
        </div>
        <p class="selected_list" v-if="['user', 'role', 'depart'].includes(copyerConfig.assigneeType)">
          <el-tag v-for="(item, index) in copyerConfig.users" :key="index" closable @close="handleRemove('user', item)">{{ operatorMapping.user[item] }}</el-tag>
          <el-tag v-for="(item, index) in copyerConfig.departs" :key="index" type="success" closable @close="handleRemove('depart', item)">{{ operatorMapping.depart[item] }}</el-tag>
          <el-tag v-for="(item, index) in copyerConfig.roles" :key="index" type="warning" closable @close="handleRemove('role', item)">{{ operatorMapping.role[item] }}</el-tag>
          <el-button v-if="operatorLength != 0" link type="primary" @click="handleClear">清除</el-button>
        </p>
      </div>
    </div>
    <template #footer>
      <div class="drawer-footer">
        <el-button type="primary" @click="saveCopyer">确 定</el-button>
        <el-button @click="closeDrawer">取 消</el-button>
      </div>
    </template>
    <EmployeesDialog v-model:visible="copyerVisible" :users="checkedUserList" :departs="checkedDepartList" :roles="checkedRoleList" :assigneeType="copyerConfig.assigneeType" @change="sureCopyer" />
  </el-drawer>
</template>

<script setup>
import $func from '@/utils/flow'
import { useStore } from 'vuex'
import { ref, watch, computed } from 'vue'
import { copyTypes } from '@/utils/flowConst'

let store = useStore()
let copyerConfig = ref({})
let copyerVisible = ref(false)
const operatorMapping = computed(() => store.state.flow.operatorMapping)
let copyerDrawer = computed(() => store.state.flow.copyerDrawer)
let copyerConfig1 = computed(() => store.state.flow.copyerConfig1)
let operatorLength = computed(() => copyerConfig.value.users?.length + copyerConfig.value.departs?.length + copyerConfig.value.roles?.length) // 已选择人员数量
let visible = computed({
  get() {
    return copyerDrawer.value
  },
  set() {
    closeDrawer()
  }
})
watch(copyerConfig1, val => {
  copyerConfig.value = val.value
})

// 切换抄送人类型
const changeType = () => {
  copyerConfig.value.users = []
  copyerConfig.value.departs = []
  copyerConfig.value.roles = []
}

// 添加抄送人
const checkedUserList = ref([])
const checkedDepartList = ref([])
const checkedRoleList = ref([])
const addCopyer = () => {
  const { users, roles, departs } = copyerConfig.value
  checkedUserList.value = users
  checkedDepartList.value = departs
  checkedRoleList.value = roles
  copyerVisible.value = true
}

// 移除已选择
const handleRemove = (type, id) => {
  if (type == 'user') {
    copyerConfig.value.users = copyerConfig.value.users.filter(item => item != id)
  } else if (type == 'depart') {
    copyerConfig.value.departs = copyerConfig.value.departs.filter(item => item != id)
  } else if (type == 'role') {
    copyerConfig.value.roles = copyerConfig.value.roles.filter(item => item != id)
  } else if (type == 'nobody') {
    copyerConfig.value.nobodyUsers = copyerConfig.value.nobodyUsers.filter(item => item!= id)
  }
}

// 清空已选择
const handleClear = () => {
  copyerConfig.value.users = []
  copyerConfig.value.departs = []
  copyerConfig.value.roles = []
}

const sureCopyer = (users, departs, roles) => {
  copyerConfig.value.users = users
  copyerConfig.value.departs = departs
  copyerConfig.value.roles = roles
  copyerVisible.value = false
}
const saveCopyer = () => {
  copyerConfig.value.error = !$func.setCopyerStr(copyerConfig.value)
  store.commit('flow/setCopyerConfig', {
    value: copyerConfig.value,
    flag: true,
    id: copyerConfig1.value.id
  })
  closeDrawer()
}
const closeDrawer = () => {
  store.commit('flow/setCopyer', false)
}
</script>

<style lang="scss" scoped>
.set_copyer {
  .copyer_content {
    .el-radio-group {
      display: unset;
    }
    .el-radio {
      width: 27%;
      margin-bottom: 20px;
      height: 16px;
    }
    .el-button:not(.is-link) {
      margin-bottom: 20px;
    }

    .el-checkbox {
      margin-bottom: 20px;
    }
  }
}
</style>
